{% extends "common/layout.html" %}
{% block content %}

    <div class="row bg-primary">
        <div class="col-sm-10 col-sm-offset-1">
            <h2>移动办公平台数据管理系统</h2>
            <h6>Mobile office platform data management system</h6>
        </div>
    </div>


    <div class="row" style="margin-top: 20px">


        <div class="col-sm-10 col-sm-offset-1">

            <div class="row time-pick">

                <div class='col-sm-2 col-sm-offset-6'>
                    <div class="form-group">
                        <label>选择开始时间：</label>
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepickers'>
                            <input type='text' class="form-control" name="starttime" id="starttime"
                                   value="{{ stime }}"/>
                            <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                        </div>
                    </div>
                </div>




                <div class='col-sm-2'>
                    <div class="form-group">
                        <label>选择结束时间：</label>
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepickere'>
                            <input type='text' class="form-control" name="endtime" id="endtime" value="{{ etime }}"/>
                            <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                        </div>
                    </div>
                </div>




                <div class='col-sm-1'>
                    <div class="form-group">
                        <label></label>
                        <button type="submit" class="btn btn-primary btn-sm btn-block do-pickup " id="dopicker">
                            搜索
                        </button>
                    </div>
                    <script type="text/javascript">
                        {#搜索#}
                        var donepicker = {
                            init: function () {
                                this.eventBind()
                            },
                            eventBind: function () {
                                $(".do-pickup").click(function () {
                                    var starttime = $(".time-pick input[name=starttime]").val();
                                    var endtime = $(".time-pick input[name=endtime]").val();
                                    var urlindex = common_ops.buildUrl("/seal/htsearch?starttime=") + starttime + "&endtime=" + endtime;
                                    document.location.href = urlindex;

                                });
                            }
                        };
                        $(document).ready(function () {
                            donepicker.init();
                        });
                        {#日期#}
                        var mydata = new Date();
                        var lastM = new Date(new Date().setMonth(new Date().getMonth() - 1));
                        {#var mudata2 = mydata.setMonth(mydata.getMonth() - 1)#}
                        $(function () {
                            var picker1 = $('#datetimepickers').datetimepicker({
                                format: 'YYYY-MM-DD',
                                locale: moment.locale('zh-cn'),
                                defaultDate: lastM.toLocaleDateString()
                                //minDate: '2016-7-1'
                            });
                            var picker2 = $('#datetimepickere').datetimepicker({
                                format: 'YYYY-MM-DD',
                                locale: moment.locale('zh-cn'),
                                defaultDate: mydata.toLocaleDateString()
                            });
                            //动态设置最小值
                            picker1.on('dp.change', function (e) {
                                picker2.data('DateTimePicker').minDate(e.date);
                            });
                            //动态设置最大值
                            picker2.on('dp.change', function (e) {
                                picker1.data('DateTimePicker').maxDate(e.date);
                            });
                        });
                    </script>
                </div>




                <div class='col-sm-1'>
                    <div class="form-group">
                        <label></label>
                        <button type="submit" class="btn btn-success btn-sm btn-block do-export " id="doexport">
                            导出
                        </button>
                    </div>

                    <script type="text/javascript">
                        var exporter = {
                            init: function () {
                                this.eventBind()
                            },
                            eventBind: function () {
                                $(".do-export").click(function () {
                                    var starttime = $(".time-pick input[name=starttime]").val();
                                    var endtime = $(".time-pick input[name=endtime]").val();
                                    var urlindex = common_ops.buildUrl("/seal/export?starttime=") + starttime + "&endtime=" + endtime;
                                    document.location.href = urlindex;

                                });
                            }
                        };
                        $(document).ready(function () {
                            exporter.init();
                        });
                    </script>
                </div>


            </div>


            <row class="data-table">
                <table class="table table-bordered table-hover">
                    <tr>
                        <th class="info">合同编号</th>
                        <th class="info">合同名称</th>
                        <th class="info">甲方名称</th>
                        <th class="info">乙方名称</th>
                        <th class="info">附件名称</th>
                        <th class="info">合同页数</th>
                        <th class="info">总份数</th>
                        <th class="info">对方份数</th>
                        <th class="info">财务份数</th>
                        <th class="info">存档份数</th>
                        <th class="info">申请时间</th>
                        <th class="info">申请人</th>
                        <th class="info">申请公司</th>
                        <th class="info">申请部门</th>
                        <th class="info">功能</th>
                    </tr>
                    {% for item in ht %}
                        <tr>
                            <th>{{ item.htsn }}</th>
                            <th>{{ item.name }}</th>
                            <th>{{ item.aname }}</th>
                            <th>{{ item.bname }}</th>
                            <th>{{ item.filename }}</th>
                            <th>{{ item.filenum }}</th>
                            <th>{{ item.num }}</th>
                            <th>{{ item.dfnum }}</th>
                            <th>{{ item.cwnum }}</th>
                            <th>{{ item.cdnum }}</th>
                            <th>{{ item.created_time }}</th>
                            <th>{{ item.creater.nickname }}</th>
                            <th>{{ item.creater.company }}</th>
                            <th>{{ item.creater.department }}</th>

                            <th>

                                <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#exampleModal" data-name="{{ item.nickname }}"
                                        data-company="{{ item.company }}" data-department="{{ item.department }}"
                                        data-phone="{{ item.phone }}" data-role="{{ item.role }}"
                                        data-uid="{{ item.id }}">编辑
                                </button>
                                <button class="btn btn-danger">删除</button>
                            </th>
                        </tr>

                    {% endfor %}
                </table>
            </row>

            <div>
                {% include "common/pagenation.html" %}
            </div>

        </div>
    </div>

    {#    模态框#}
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">修改用户信息</h4>
                </div>
                <div class="modal-body">

                    <form class="form" style="margin-top: 10px" method="post"
                          action="{{ buildUrl('/member/adminupdate') }}">

                        <div class="form-group">
                            <label class="control-label">ID:</label>
                            <input type="text" class="form-control" id="uid" name="uid">
                        </div>

                        <div class="form-group">
                            <label class="control-label">姓名:</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>

                        <div class="form-group">
                            <label for="recipient-name" class="control-label">公司:</label>
                            <input type="text" class="form-control" id="company" name="company">
                        </div>

                        <div class="form-group">
                            <label for="recipient-name" class="control-label">部门:</label>
                            <input type="text" class="form-control" id="department" name="department">
                        </div>

                        <div class="form-group">
                            <label for="recipient-name" class="control-label">手机:</label>
                            <input type="text" class="form-control" id="phone" name="phone">
                        </div>

                        <div class="form-group">
                            <label for="message-text" class="control-label">角色:</label>
                            <textarea class="form-control" id="role" name="role"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button class="btn btn-primary" type="submit" value="Submit">修改信息</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>


    <script>
        {#编辑赋值#}
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var name = button.data('name');
            var company = button.data('company');
            var department = button.data('department');
            var phone = button.data('phone');
            var role = button.data('role');
            var uid = button.data('uid');

            var modal = $(this)
            {#modal.find('.modal-title').text('New message to ' + recipient);#}
            {#modal.find('.modal-body input').val(recipient)#}
            {#modal.find('.modal-body textarea').val(recipient)#}
            document.getElementById("name").value = name;
            document.getElementById("company").value = company;
            document.getElementById("department").value = department;
            document.getElementById("phone").value = phone;
            document.getElementById("role").value = role;
            document.getElementById("uid").value = uid;
        });
    </script>



{% endblock %}


{% block js %}
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
{% endblock %}


